flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
1.9 kB
66 lines
1<script lang="ts">
2 import Avatar from '$lib/Components/Avatar.svelte';
3 import Container from '$lib/Components/Container.svelte';
4 import ItemsGrid from '$lib/Components/ItemsGrid.svelte';
5 import { onMount } from 'svelte';
6
7 let { data } = $props();
8
9 function calculateAge(birthday: string) {
10 // set birthday time to 00:00:00
11 const birthdayDate = new Date(birthday);
12 birthdayDate.setHours(0, 0, 0, 0);
13
14 // set current time to 00:00:00
15 const currentDate = new Date();
16 currentDate.setHours(0, 0, 0, 0);
17
18 const ageDifMs = currentDate.getTime() - birthdayDate.getTime();
19 const ageDate = new Date(ageDifMs);
20 return Math.abs(ageDate.getUTCFullYear() - 1970);
21 }
22
23 let showFullBiography = $state(false);
24</script>
25
26<Container class="relative z-10 pb-8 pt-4">
27 <div class="flex items-center gap-4 px-4 pt-8">
28 <Avatar
29 src={data.personDetails.profile_path
30 ? 'https://image.tmdb.org/t/p/w500' + data.personDetails.profile_path
31 : undefined}
32 size="size-44"
33 />
34 <div class="flex flex-col gap-2">
35 <div class="max-w-xl text-2xl font-semibold text-white sm:text-4xl">
36 {data.personDetails.name}
37 </div>
38 {#if data.personDetails.birthday}
39 <div class="text-sm text-base-300">
40 {calculateAge(data.personDetails.birthday)} years old
41 </div>
42 {/if}
43 </div>
44 </div>
45 <div class="px-4 pt-4 text-sm text-white">
46 <div class="mb-8 max-w-2xl text-sm text-white">
47 <div class="mb-2 text-lg font-semibold">overview</div>
48 <div class={showFullBiography ? '' : 'line-clamp-4'}>
49 {data.personDetails.biography}
50 </div>
51 {#if !showFullBiography}
52 <button
53 class="mt-1 font-semibold text-accent-400"
54 onclick={() => (showFullBiography = true)}
55 >
56 show more
57 </button>
58 {/if}
59 </div>
60
61 <div class="mb-4 max-w-2xl text-sm text-white">
62 <div class="mb-2 text-lg font-semibold">appearing in</div>
63 <ItemsGrid items={data.combinedCredits} />
64 </div>
65 </div>
66</Container>